<template>
    <div class="container">
        <!-- 卡片视图区域 -->
        <el-card>
            <h3>课程列表</h3>
            当前专业：<el-select v-model="subjectsId" placeholder="请选择">
                <el-option v-for="item in subjects" :key="item._id"
                    :label="item.name" :value="item._id">
                </el-option>
            </el-select>

            <el-table :data="courseArr" style="width: 100%" border>
                <el-table-column prop="_id" label="id" width="180">
                </el-table-column>
                <!-- 课程名称 -->
                <el-table-column prop="name" label="课程名称" width="180">
                    <!-- <template width="90" slot-scope="scope">
          <el-input
            type="text"
            v-model="changeStudent.name"
            v-show="scope.row.isEdit"
          />
          <span v-show="!scope.row.isEdit">{{ scope.row.name }}</span>
        </template> -->
                </el-table-column>

                <!-- 操作 -->
                <el-table-column prop="gender" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger"
                            icon="el-icon-delete"
                            @click="deleteCourse(scope.row._id)">删除</el-button>

                        <!-- <el-button size="mini" type="primary" v-show="!scope.row.isEdit"
              icon="el-icon-edit" @click="change(scope.row._id)">
              修改
            </el-button>

            <el-button size="mini" type="success" v-show="scope.row.isEdit"
              @click="upChange"><i class="el-icon-upload el-icon--right"></i>保存
            </el-button> -->
                    </template>
                </el-table-column>
            </el-table>

        </el-card>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("subject");
export default {
    data() {
        return {
            subjectsId: "",
            courseArr: []
        };
    },
    computed: {
        ...mapState(['subjects'])
    },
    methods: {
        // 获取专业
        ...mapActions(['getSubject']),
        // 通过id获取课程
        getCoursesById() {
            this.$api.courseApi.getCoursesBySubjectsId(
                { subjectsId: this.subjectsId }
            )
                .then(({ data }) => {
                    // console.log(data.data.rows);
                    this.courseArr = data.data.rows
                })
        },
        deleteCourse(_id) {
            this.$api.courseApi.deleteCourse(_id).then(({ data }) => {
                this.$message.success(data)
                this.getCoursesById()
            })
        }

    },
    created() {
        this.getSubject();
    },
    watch: {
        subjects() {
            this.subjectsId = this.subjects[0]._id
        },
        subjectsId() {
            this.getCoursesById()
        }
    }
}
</script>

<style lang='scss' scoped>
.container {
    width: 610px;
}
</style>